<div class="kx_tabs">
	<ul class="kx_tabs_vertical">
		<?php foreach($this->form->getSubForms() as $subForm):?>
		<li><a href="<?php print $this->url(array()) . '#' . $subForm->getId(); ?>"><?php print $subForm->getAttrib('legend')?></a></li>
		<?php endforeach;?>
	</ul>	

	<div class="kx_tabs_content">
		<form id="kx_tab_form"
			  action="<?php print $this->form->getAttrib('action')?>" 
			  method="<?php print $this->form->getAttrib('method')?>"
			  enctype="<?php print $this->form->getAttrib('enctype')?>">
	
			<?php foreach($this->form->getSubForms() as $subForm):?>
			<div id="kx_tabs_content-<?php print $subForm->getId();?>" class="form-content">
				<?php
					$subForm->removeDecorator('DtDdWrapper');
					print $subForm;
				?>
			</div>
			<?php endforeach;?>

		</form>
		
		<div class="options-wrapper">
			<ul class="options-holder left">
				<li class="option">
					<a id="wizard_back"
					   class="action back"
					   href="<?php print $this->url(array('action' => 'add'), null)?>">Cofnij</a></li>
			</ul>
		
			<ul class="options-holder right">
				<li class="option">
					<a id="wizard_next"
					   class="action right next" 
					   href="<?php print $this->url(array('action' => 'add'), null)?>">Dalej</a></li>
			</ul>
		</div>
	</div>
</div>

<div id="dialog_no_valid" style="display: none;" title="Wypełnij prawidłowo pola formularza">
	<p>
		<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
		Zakładki oznaczone kolorem <span style="color: red">czerwonym</span> zawierają błędy.
	</p>

	<p><b>Wypełnij wymagane pola formularza.</b></p>
</div>
<div id="dialog_errors" style="display: none;" title="Wypełnij prawidłowo pola formularza">
	<p>
		<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
		Znaleziono błedy w formularzu, zmiany nie zostały zapisane.
	</p>
	
	<p><b>Wypełnij poprawnie pola formularza w zakładkach oznaczonych kolorem <span style="color: red">czerwonym</span>.</b></p>
</div>


<script type="text/javascript">
(function($){
	
	$.fn.kx_formTabs = function(options) {

		// obserator elementu przed jego zaznaczeniem
		var _beforeSelect = function(e, data) {
			$self.find('li > a').removeClass('active');
			$(data.sender).addClass('active');
		};

		// obserator elementu po jego zaznaczeniu
		var _afterSelect = function(e, data) {};
		
		/**
		 * Konfiguracja
		 */
		var defaults = {
				'tab_content_id_prefix': 'kx_tabs_content',
				'class': '',
				'beforeSelect': _beforeSelect,
				'afterSelect': _afterSelect
		};

		var options = $.extend(defaults, options); 

		
		/**
		 * Zmienne
		 */
		var _tabs = [];
		var _tabsHrefToPosition = [];
		var _count = 0;
		var _pointer = 0;

		// zmienne używane do rozpoznawania aktywnej zakładki
		var _urlHash = window.location.hash.split('#')[1];
		var _firstPosition = false;

		var $self = this;

		// tworzenie głównych obserwatorów 
		this.bind('kx_tab_before_select', options.beforeSelect);
		this.bind('kx_tab_after_select', options.afterSelect);

		this.bind('kx_tab_no_valid', function(e, data){});
		this.bind('kx_tab_valid', function(e, data){});

		
		/**
		 * Metody publiczne
		 */
		this.select = function(position, sender){
			if (!sender) {
				sender = _tabsHrefToPosition[position].object;
			}

			// uruchomienie obserwatorów danego typu powiadomienia
			$self.triggerHandler('kx_tab_before_select', {
				'position':position,
				'sender':sender,
				'count': this.count()
			});

			// ukryj aktualną zakładkę
			this.current().hide();

			var oldPosition = this.key();
			_pointer = parseInt(position);

			if (false == this.valid()) {
				$self.triggerHandler('kx_tab_no_valid', {
					'position':position,
					'sender':sender,
					'count': this.count()
				});

				_pointer = oldPosition;
			} else {
				$self.triggerHandler('kx_tab_valid', {
					'position':position,
					'sender':sender,
					'count': this.count()
				});
			}

			// pokaż nową aktualną zakładkę
			this.current().show();

			$self.triggerHandler('kx_tab_after_select', {
				'position':_pointer,
				'sender':sender,
				'count': this.count()
			});

			return this;
		};

		this.current = function() {
			return $(_tabs[_pointer]);
		};

		this.key = function() {
			return _pointer;
		};
		
		this.next = function() {
			this.select(_pointer+1);
			return this;
		};

		this.back = function() {
			this.select(_pointer-1);
			return this;
		};

		this.valid = function() {
			return (_pointer < 0 || _pointer > _count) === false;
		};

		this.count = function () {
			return _count;
		};

		this.firstPosition = function() {
			return _firstPosition;
		};

		this.isFirst = function() {
			return (_pointer <= 0);
		};

		this.isLast = function() {
			return (_pointer+1 >= _count);
		};
		
		
		/**
		 * Metody prywatne
		 */
		 var _initTabs = function() {

			 // wyszukaj wszystkie zakladki
			$self.find('li > a').each(function(k,i){
				var _hrefHash = this.href.split('#')[1];

				var contentTabId = '#' + options.tab_content_id_prefix + '-' + _hrefHash;

				_tabs.push(contentTabId);

				_tabsHrefToPosition[k] = _tabsHrefToPosition[_hrefHash] = {
						'key' : k,
						'object' : i,
						'hash' : _hrefHash,
						'contentId' : contentTabId
				};

				// pierwszy element jako aktywna zakładka ustaw aktywną zakładkę
				if (_firstPosition === false) {
					_firstPosition = k;
				}
				// 
				if (_urlHash == _hrefHash) {
					_firstPosition = k;
				}
			})
			.bind('click.kx_form_tab',_tabClick);

			// zlicz zakladki
			_count = _tabs.length;
		};

		var _initContentTabs = function() {
			// od 1 bo pierwsza zakladka ma być widoczna
			for (var i = 1; i < _tabs.length; i++) {
				$(_tabs[i]).hide();
			}
		};


		var _tabClick = function() {
			$self.select(_tabsHrefToPosition[this.href.split('#')[1]].key, this);
			return true;
		};

		/**
		 * Inichowanie
		 */

		 _initTabs();
		 _initContentTabs();

//		 $self.select(_firstPosition);

		return this;
	};
})(jQuery);

(function($){
	/**
	 * Definiowanie zmiennych z poziomu PHP
	 */
	<?php
		/**
		 * Wszystkie opcje PHP są zamieniane na zmienne JS 
		 */
		if (isset($this->options) 
				&& is_array($this->options))
		{
			foreach ($this->options as $var => $value)
			{
				printf('var %s = "%s";'."\n", $var, $value);
			}
		}
	?>

	/**
	 * Ustawienie zmiennych
	 */
	if (BUTTON_SAVE_NAME == undefined || BUTTON_SAVE_NAME == '')
	{
		var BUTTON_SAVE_NAME = 'Zapisz';
	}
	if (BUTTON_NEXT_NAME == undefined || BUTTON_NEXT_NAME == '')
	{
		var BUTTON_NEXT_NAME = 'Dalej';
	}
	if (BUTTON_BACK_NAME == undefined || BUTTON_BACK_NAME == '')
	{
		var BUTTON_BACK_NAME = 'Wstecz';
	}

	/**
	 * Definiwanie powiadomieniń
	 */
	
	$("#dialog_no_valid").dialog({
		bgiframe: true,
		width: 500,
		autoOpen: false,
		resizable: false,
		modal: true,
		overlay: {
			backgroundColor: '#000',
			opacity: 0.5
		},
		buttons: {
			'OK': function() {
				$(this).dialog('close');
			}
		}
	});

	$("#dialog_errors").dialog({
		bgiframe: true,
		width: 500,
		autoOpen: false,
		resizable: false,
		modal: true,
		overlay: {
			backgroundColor: '#000',
			opacity: 0.5
		},
		buttons: {
			'OK': function() {
				$(this).dialog('close');
			}
		}
	});
	
	/**
	 * Inicjowanie zakładek ..
	 */
	var _formTabs = $('.kx_tabs_vertical').kx_formTabs({
		// w tym bloku szukane i ukrywane są bloki?
		'container' : '#form-container'
	});


	/**
	 * Animacja zmian nazw i class przycisków nawigacyjnych
	 */
	_formTabs.bind('kx_tab_after_select',function(e, data) {
		if (_formTabs.isLast()) {
			$('#wizard_next').text(BUTTON_SAVE_NAME).addClass('save').removeClass('next');
		} else {
			$('#wizard_next').text(BUTTON_NEXT_NAME).removeClass('save').addClass('next');
		}

		if (_formTabs.isFirst()) {
			$('#wizard_back').text(BUTTON_BACK_NAME).hide();
		} else {
			$('#wizard_back').text(BUTTON_BACK_NAME).show();
		}
	});

	/**
	 * Aktuwuj zakładkę (rozpoznaje za pomocą url hash # :))
	 */ 
	_formTabs.select(_formTabs.firstPosition());


	/**
	 * Nawigacja: poprzedni <--> następny
	 */	
	$('#wizard_next').click(function(e) {
		e.preventDefault();
		
		if (_formTabs.isLast()) {
			// element akcji
			var actionElement = document.createElement('input');
			actionElement.type = 'hidden';
			actionElement.name = '__kx_action';

			if (document.forms[0] !== undefined) {
				actionElement.value = 'exit';
				$('#kx_tab_form').append(actionElement).submit();
			}
		} else {
			_formTabs.next();
		}
	});

	$('#wizard_back').click(function(e){
		e.preventDefault();

		if (false ===_formTabs.isFirst()) {
			_formTabs.back();
		}
	});

	/**
	 * Waldacja: przed wysłaniem formularza
	 */
	$('#kx_tab_form').submit(function(){
		var valid = true;

		// odszukaj wszystkie pola oznaczone jako wymagane
		$('#kx_tab_form').find('label.required').each(function(k,item){
			var input = $(item).parent('dt').next().children(':input');

			/**
			 * sprawdź czy pole ma podaną wartość...
			 * i sprawdzane jest również czy pole jest widoczne (TinyMCE pole textarea ustawia na display=none)
			 * pprzey ceckbox ma provblemy stąd input.size() != 0
			 */ 

			if(!input.val() && input.css('display') != 'none' && input.size() != 0)
			{
				var idContent = $(item).parents('div').attr('id').replace('kx_tabs_content-','');
				$('a[href$='+idContent+']').addClass('required');
				
				valid = false;
			} else
			/**
			 * tutaj jest przerwanie.. sprawdzaj tylko wtedy gdy jest valid! 
			 * nie interesują mnie czy są jeszcze jakieś pola nie poprawne/nie wypełnione
			 * bo tylko oznaczam zakłądkę jako zawierającą pola wymagane
			 * a tak może się zdarzyć że nstępne pole które jest required będzie poprawne
			 * i oznaczenie zakładki jako niepoprawnej zniknie! 
			 */
			if(false !== valid) {
				var idContent = $(item).parents('div').attr('id').replace('kx_tabs_content-','');
				$('a[href$='+idContent+']').removeClass('required');
			}
		});

		if (!valid)
		{
			$("#dialog_no_valid").dialog('open');
		}
		
		return valid;
	});

	/**
	 * Wyszukuje elemnty w zakładkach które zawierają błedy
	 * i oznacza zakładki jako required!
	 */
	
	function markErrorTabsForm() {
		var valid = true;
		
		$('#kx_tab_form').find('ul.errors').each(function(k,item){
			var idContent = $(item).parents('div').attr('id').replace('kx_tabs_content-','');
			$('a[href$='+idContent+']').addClass('required');

			valid = false;
		});

		return valid;
	}

	if (false == markErrorTabsForm())
	{
		$("#dialog_errors").dialog('open');
	}

})(jQuery);
</script>